<template>
  <!-- 列表 -->
  <div
    class="flex module-show-list"
    v-if="list.length > 0"
    animation="fadeInUp"
  >
    <div
      class="module-show-item hand"
      @click.stop="jump(item)"
      v-for="(item, index) in list"
      :key="index + Date.now()"
    >
      <!-- 图片 -->
      <div class="image-lar">
        <el-image :src="item.full_background_image_url || item.full_wxshare_icon" class="full-bg">
          <div slot="placeholder" class="pac">
            <i class="el-icon-loading primary fs-xl"></i>
          </div>
          <div slot="error" class="pac">
            <i class="el-icon-loading primary fs-xl"></i>
          </div>
        </el-image>
      </div>
      <!-- 标题 -->
      <div class="flex title">
        <div class="pano-name" v-if="item.project_name">
          <!-- <el-tooltip effect="dark" :content="item.project_name" placement="bottom-start"> -->
          <p class="omit">{{ item.project_name }}</p>
          <!-- </el-tooltip> -->
        </div>
        <div class="pano-user" v-if="item.contact_name">
          <!-- <el-tooltip effect="dark" :content="item.contact_name" placement="bottom-end"> -->
          <p class="omit tar">{{ item.contact_name }}</p>
          <!-- </el-tooltip> -->
        </div>
      </div>
      <!-- 左上角 -->
      <!-- <div class="left-top">
      <i class="iconfont icon-liulanliang fc-w3 fs-n"></i>
      <span class="fc-w3 fs-n">{{item.seecount | numToUnitNum}}</span>
      <i class="iconfont icon-qinziAPPtubiao- fc-w3 fs-n"></i>
      <span class="fc-w3 fs-n">{{item.praisecount | numToUnitNum}}</span>
    </div> -->
      <!-- 左下角 -->
      <div class="left-bottom fc-w2 fs-n" v-if="item.tag_id">
        {{ item.tag_id }}
      </div>
      <!-- 右上角 -->
      <div class="right-top hand">
        <img src="static/images/home/u376.png" alt="" />
      </div>
      <!-- 中间二维码 -->
      <div class="qrcode-img">
        <img
          :src="`${urlApi}common/qrcode?data=${encodeURIComponent(
            item.full_prjectview_url
          )}&logo=${logoImage}`"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      urlApi: $globalconfig.URLS.API,
      logoImage: $globalconfig.LOGO,
    }
  },
  props: {
    list: {
      type: Array,
      default: []
    }
  },
  methods: {
    jump(item) {
      window.open(item.full_prjectview_url)
    }
  }
}
</script>

<style lang="stylus" scoped>
.module-show-list
  flex-wrap wrap
  margin-top 30px
  .module-show-item
    width 24.25%
    margin-right 1%
    margin-bottom 20px
    position relative
    overflow hidden
    &:hover
      .right-top
        display block
      > .image-lar
        .el-image
          transform scale(1.2)
    .image-lar
      overflow hidden
      width 100%
      height 263px
      border-radius 4px
      .el-image
        width 100%
        height 100%
        transition all 0.5s
    .title
      justify-content space-between
      height 40px
      padding 10px 0 15px
      .pano-name
        width 70%
        font-size 15px
        font-family PingFang SC
        font-weight bold
        color #000000
      .pano-user
        width 30%
        font-size 14px
        font-family PingFang SC
        color #999999
    .left-top
      position absolute
      left 5px
      top 5px
      background-color rgba(0, 0, 0, 0.2)
      padding 5px
      border-radius 5px
    .right-top
      width 30px
      height 30px
      position absolute
      right 5px
      top 5px
      padding 5px
      background-color rgba(0, 0, 0, 0.2)
      border-radius 5px
      display none
      &:hover
        ~.qrcode-img
          display block
      img
        width 100%
        height 100%
    .left-bottom
      position absolute
      left 5px
      bottom 45px
      background-color rgba(0, 0, 0, 0.2)
      padding 5px
      border-radius 5px
    .qrcode-img
      position absolute
      top -40px
      right 0
      bottom 0
      left 0
      margin auto
      width 60%
      height 175px
      display none
      img
        width 100%
        height 100%
  .module-show-item:nth-child(4n)
    margin-right 0
</style>